<div class="modal fade template-edit-modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" (click)="tabActive()" data-dismiss="modal" aria-label="Close" (click)="close()">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" *ngIf="template.id">编辑</h4>
                <h4 class="modal-title" *ngIf="!template.id">新增</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" #templateeditForm="ngForm">
                    <div class="box-body">
                         <div class="nav-tabs-custom">
                          <ul class="nav nav-tabs">
                            <li class="active" id="tab1"><a href="#tab_1" id="tabOneContent" data-toggle="tab">基本信息</a></li>
                            <li id="tab2"><a href="#tab_2" id="tabTwoContent" data-toggle="tab">短信模板</a></li>
                            <li id="tab3"><a href="#tab_3" id="tabThreeContent" data-toggle="tab">邮件模板</a></li>
                            <li id="tab4"><a href="#tab_4" id="tabFourContent" data-toggle="tab">网页模板</a></li>
                          </ul>
                          <div class="tab-content">
                            <div class="tab-pane active" id="tab_1">
                                <div class="form-group" [class.has-error]="name.valid ===false &&(name.dirty || name.touched)">
                                    <label class="col-sm-1 control-label">名称</label>
                                    <div class="col-sm-10">
                                        <input maxlength="20" id="name" pattern="^[A-Za-z0-9_\u4e00-\u9fa5]+$" type="text" #name="ngModel" required [(ngModel)]="template.name" name="name" class="form-control" placeholder="请输入名称">
                                    </div>
                                </div>

                            </div>
                            <!-- /.tab-pane -->
                            <div class="tab-pane" id="tab_2">
                                <div class="form-group">
                                    <!-- <label class="col-sm-1 control-label"></label> -->
                                    <div class="col-sm-10">
                                        <textarea class="smsContent" placeholder="请输入短信模板" name="" id="textarea" rows="13" [(ngModel)]="template.smsContent" name="smsContent"></textarea>
                                        <span class='number'><span id="textNum">0</span>/140</span>
                                    </div>
                                </div>
                            </div>
                            <!-- /.tab-pane -->
                             <div class="tab-pane" id="tab_3">
                                <!-- CK Editor -->
                                  <div class="form-group" >
                                      <!-- <label class="col-sm-1 control-label"></label> -->
                                      <div class="col-sm-12">
                                          <textarea name="emailContent" id="emailContent"  rows="2" cols="100"  [(ngModel)]="template.emailContent" >
                                          </textarea>
                                      </div>
                                  </div>
                            </div>
                            <!-- /.tab-pane -->
                             <div class="tab-pane" id="tab_4">
                                <!-- CK Editor -->
                                  <div class="form-group" >
                                      <!-- <label class="col-sm-1 control-label"></label> -->
                                      <div class="col-sm-12">
                                          <textarea name="webContent" id="webContent"  rows="2" cols="100"  [(ngModel)]="template.webContent" >
                                          </textarea>
                                      </div>
                                  </div>
                            </div>
                            <!-- /.tab-pane -->
                          </div>
                          <!-- /.tab-content -->
                        </div>

                         <!-- <div class="form-group" *ngIf="template.type=='auto'">
                            <label class="col-sm-3 control-label">创建</label>
                            <div class="col-sm-8">
                                <input type="text" [(ngModel)]="template.createdAt" name="cron" class="form-control" placeholder="请输入执行规则">
                            </div>
                        </div> -->
                        <!-- <div class="form-group" *ngIf="template.type=='auto'">
                            <label class="col-sm-3 control-label">更新</label>
                            <div class="col-sm-8">
                                <select class="form-control" [(ngModel)]="template.updatedAt" name="isActive">
                                     <option value="true">启用</option>
                                    <option value="false">停止</option>
                                </select>
                            </div>
                        </div> -->
                        <!-- <div class="form-group">
                            <label class="col-sm-3 control-label" [(ngModel)]="template.deletedAt" name="deletedAt">删除</label>
                            <div class="col-sm-8">
                                 <select class="form-control" [(ngModel)]="template.deletedAt" name="orderType">
                                 </select>
                            </div>
                        </div> -->
                        <!-- <div class="form-group">
                            <label class="col-sm-3 control-label">操作</label>
                            <div class="col-sm-8">
                                <textarea class="form-control" rows="3" placeholder="请输入脚本" [(ngModel)]="template.order" name="order"></textarea>
                            </div>
                        </div> -->
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">取消</button>
                <button type="button" (click)="createOrUpdate()" id="save" (click)="tabActive()" [disabled]="!templateeditForm.form.valid" class="btn btn-primary">保存</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
